<template>
  <div class="image-style" :style="style"></div>
</template>
<script>
import { renderWidgetData } from "../tools/DataUtils";
export default {
  props: {
    widget: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      render: null,
    };
  },
  computed: {
    style() {
      return {
        width: this.widget.location.width + "px",
        height: this.widget.location.height + "px",
        border:
          this.widget.option.borderWidth +
          "px solid " +
          this.widget.option.borderColor,
        opacity: this.widget.option.opacity,
        backgroundImage: "url(" + this.widget.option.data.value + ")",
        backgroundColor: this.widget.option.backgroundColor,
      };
    },
    data() {
      return this.widget.data;
    },
    refresh() {
      return this.widget.service.timestamp;
    },
  },
  watch: {
    data: {
      handler() {
        this.refreshWidgetInfo();
      },
      deep: true,
    },
    refresh: {
      handler() {
        this.refreshWidgetInfo();
      },
    },
  },
  mounted() {
    this.refreshWidgetInfo();
  },
  destroyed() {
    this.recoveryRenderObject();
  },
  methods: {
    refreshWidgetInfo() {
      this.recoveryRenderObject();
      this.render = renderWidgetData(this.widget, this.refreshWidgetData);
    },
    refreshWidgetData(data) {
      this.widget.option.data.value = data.value;
    },
    recoveryRenderObject() {
      if (this.render && this.render.apiTimer) {
        clearInterval(this.render.apiTimer);
        this.render.apiTimer = null;
      }
      if (this.render && this.render.websocket) {
        this.render.websocket.doDisconnect();
      }
    },
  },
};
</script>
<style lang="stylus">
.image-style {
  box-sizing: border-box;
  background-size: 100% 100%;
}
</style>

